/* eslint-disable react/jsx-no-bind */
import { Card } from 'antd'
import { render } from 'react-dom'

import client from '@slardar/base'

const $root = document.querySelector('#app')

const init = () => {
  client.init(Cypress.env().init)
}

const config = () => {
  client.config(Cypress.env().config)
}

const start = () => {
  client.start()
}

const triggerCustomEvent = () => {
  client.sendEvent?.({
    name: 'custom-event',
    metrics: {
      a: 3,
    },
    categories: {
      b: '3',
    },
  })
}

const triggerCustomLog = () => {
  client.sendLog?.({
    content: 'custom-event',
    extra: {
      a: 3,
      b: '3',
    },
    level: 'error',
  })
}

const triggerSenderSetSize = () => {
  client.on('init', () => {
    client?.getSender()?.setSize(50)
    client.sendEvent?.({
      name: 'set-size',
      metrics: {
        size: client?.getSender()?.getSize() || 0,
      },
    })
  })
}

const triggerSenderSetWait = () => {
  client.on('init', () => {
    client?.getSender()?.setWait(1500)
    client.sendEvent?.({
      name: 'set-wait',
      metrics: {
        wait: client?.getSender()?.getWait() || 0,
      },
    })
  })
}

const triggerContextSetonInit = () => {
  client.on('init', () => {
    client?.context?.set('test', '1111')
    client.sendEvent?.({
      name: 'set-context',
    })
  })
}

const sendPageview = () => {
  client.report({
    ev_type: 'pageview',
    payload: {
      source: 'init',
      pid: 'test',
    },
  })
}

const App = () => {
  return (
    <div className="app">
      <style>
        {`* {
          margin: 0;
          padding: 0
        }`}
      </style>
      <Card>
        <h1>Slardar SDK</h1>
        <p>Testing by cypress</p>
        <button id="init" onClick={init}>
          Init
        </button>
        <button id="config" onClick={config}>
          Config
        </button>
        <button id="start" onClick={start}>
          Start
        </button>
        <button id="trigger-custom-event" onClick={triggerCustomEvent}>
          trigger-custom-event
        </button>
        <button id="trigger-custom-log" onClick={triggerCustomLog}>
          trigger-custom-log
        </button>
        <button id="trigger-sender-setSize" onClick={triggerSenderSetSize}>
          trigger-sender-setSize
        </button>
        <button id="trigger-sender-setWait" onClick={triggerSenderSetWait}>
          trigger-sender-setWait
        </button>
        <button id="trigger-context-set-on-init" onClick={triggerContextSetonInit}>
          trigger-context-set-on-init
        </button>
        <button id="send-pageview" onClick={sendPageview}>
          send-pageview
        </button>
      </Card>
    </div>
  )
}

const delay = new URL(location.href).searchParams.get('delay')
if (delay) {
  setTimeout(() => {
    render(<App />, $root!)
  }, parseInt(delay))
} else {
  render(<App />, $root!)
}
